<template>
	<view class="page-container">
		<u-sticky bgColor="#fff" zIndex="998">
			<view class="header">
				<view class="header-top">
					<view class="header-top-left">
						<u-icon name="arrow-left" color="#000" size="22" @click="onBack()" bold></u-icon>
						<image class="header-top-left-titleImage" src="@/static/local-circles/header-title.png"
							mode="aspectFit">
						</image>
					</view>
				</view>
				<view class="topicBox">
					<image src="@/static/local-circles/topic.png" mode=""></image>
				</view>
				<view class="middle-search">
					<view class="u-demo-block__content">
						<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
						<!-- #ifndef APP-NVUE -->
						<u-input placeholder="搜索本地热门话题" shape="circle" style="border: 1px solid #EEB513;"
							border="1px solid #EEB513" v-model="searchVal" clearable confirmType="search"
							@confirm="loadPosts(true)">
						<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<u--input placeholder="搜索本地热门话题" shape="circle" style="border: 1px solid #EEB513;" border
								v-model="searchVal" clearable confirmType="search" @confirm="loadPosts(true)">
							<!-- #endif -->
								<template slot="prefix">
									<view class="search-input-prefix" @click="navigateToCitySelect">
										<view class="search-input-prefix-address">
											{{cityName}}
										</view>
										<view class="search-input-prefix-icon">
											<u-icon name="arrow-down-fill" color="#000" size="13"></u-icon>
										</view>
									</view>
								</template>
								<template slot="suffix">
									<u-icon name="search" color="#4D4D56" size="27" @click="loadPosts(true)"></u-icon>
								</template>
						<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						</u--input>
						<!-- #endif -->
					</view>
				</view>
			</view>
		</u-sticky>

		<!-- 街头热议Street-discussion.png -->
		<view class="Street-discussion">
			<view class="Street-discussion-content">
				<u-scroll-list indicatorActiveColor="#FFAA0C">
					<view class="Street-discussion-content-imgBox" v-for="(item, index) in StreetDiscussionList"
						:key="index" @click="handleToDetail(item)">
						<view class="image-wrapper">
							<image :src="item.files[0].fileUrl" mode="aspectFill"></image>
							<view class="Street-discussion-content-imgTitle">
								{{item.content}}
							</view>
						</view>
					</view>
				</u-scroll-list>
			</view>
		</view>

		<!-- 探索本地圈 -->
		<u-sticky offset-top="100rpx" customNavHeight="160rpx" bgColor="#fff" zIndex="998"
			@fixed="onStreetDiscussionFixed">
			<view class="Explore-local-community-header">
				<view class="Explore-local-community-header-left">
					<view class="Explore-local-community-header-imageBox">
						<image src="/static/local-circles/Participate-topic.png" mode=""></image>
					</view>
					<view class="Explore-local-community-header-title">
						街头热议
					</view>
				</view>
				<view class="Explore-local-community-header-right">
					<view class="switch-container">
						<view class="switch-option" :class="{ 'active': isNewDesc == 2 }" @click="handleSwitch(2)">
							推荐
						</view>
						<view class="switch-option" :class="{ 'active': isNewDesc == 0 }" @click="handleSwitch(0)">
							最新
						</view>
						<view class="switch-option" :class="{ 'active': isNewDesc == 1 }" @click="handleSwitch(1)">
							最热
						</view>
						<view class="switch-slider" :class="{ 
				      'slide-center': isNewDesc == 0, 
				      'slide-right': isNewDesc == 1,
				      'slide-left': isNewDesc == 2
				    }"></view>
					</view>
				</view>
			</view>
		</u-sticky>

		<view class="Explore-local-community-wrapper" v-show="isNewDesc == 1">
			<view class="Explore-local-community" @touchstart="handleContentTouchStart"
				@touchend="handleContentTouchEnd" @touchmove="handleContentTouchMove">
				<view class="Explore-local-community-list" v-for="(item,index) in hotList" :key="index"
					@click="handleToDetail(item)">
					<view class="Explore-local-community-list-content">
						<view class="Explore-local-community-list-content-top">
							<view class="Explore-local-community-list-content-top-left">
								<view class="Explore-local-community-list-content-top-left-img">
									<u-avatar :src="item.avatar" shape="circle" size="25"></u-avatar>
								</view>
								<view class="Explore-local-community-list-content-top-left-name">
									{{item.nickName}}
								</view>
							</view>
							<view class="Explore-local-community-list-content-top-right">
								<view class="Explore-local-community-list-content-top-right-left">
									{{item.viewCount?item.viewCount+'浏览':''}}
								</view>
								<view class="Explore-local-community-list-content-top-right-right">
									{{item.commentCount?item.commentCount+'评论':''}}
								</view>
							</view>
						</view>
						<view class="Explore-local-community-list-content-middle">
							<view class="Explore-local-community-list-content-middle-left">
								<view class="Explore-local-community-list-content-middle-left-h1">
									{{item.title}}
								</view>
								<view class="Explore-local-community-list-content-middle-left-h2">
									{{item.content}}
								</view>
							</view>
							<view class="Explore-local-community-list-content-middle-right">
								<image :src="getFirstImageUrl(item.files)" mode="aspectFill" :lazy-load="true"></image>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="waterfallLoadStatus" />
				<view class="" style="height: 20rpx;"></view>
			</view>
		</view>

		<view class="Explore-local-community-wrapper" v-show="isNewDesc == 0">
			<view class="Explore-local-community" @touchstart="handleContentTouchStart"
				@touchend="handleContentTouchEnd" @touchmove="handleContentTouchMove">
				<view class="Explore-local-community-list" v-for="(item,index) in latestList" :key="index"
					@click="handleToDetail(item)">
					<view class="Explore-local-community-list-content">
						<view class="Explore-local-community-list-content-top">
							<view class="Explore-local-community-list-content-top-left">
								<view class="Explore-local-community-list-content-top-left-img">
									<u-avatar :src="item.avatar" shape="circle" size="25"></u-avatar>
								</view>
								<view class="Explore-local-community-list-content-top-left-name">
									{{item.nickName}}
								</view>
							</view>
							<view class="Explore-local-community-list-content-top-right">
								<view class="Explore-local-community-list-content-top-right-left">
									{{item.viewCount?item.viewCount+'浏览':''}}
								</view>
								<view class="Explore-local-community-list-content-top-right-right">
									{{item.commentCount?item.commentCount+'评论':''}}
								</view>
							</view>
						</view>
						<view class="Explore-local-community-list-content-middle">
							<view class="Explore-local-community-list-content-middle-left">
								<view class="Explore-local-community-list-content-middle-left-h1">
									{{item.title}}
								</view>
								<view class="Explore-local-community-list-content-middle-left-h2">
									{{item.content}}
								</view>
							</view>
							<view class="Explore-local-community-list-content-middle-right">
								<image :src="getFirstImageUrl(item.files)" mode="aspectFill" :lazy-load="true"></image>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="waterfallLoadStatus" />
				<view class="" style="height: 20rpx;"></view>
			</view>
		</view>

		<view class="Explore-local-community-wrapper" v-show="isNewDesc == 2">
			<view class="Explore-local-community" @touchstart="handleContentTouchStart"
				@touchend="handleContentTouchEnd" @touchmove="handleContentTouchMove">
				<view class="Explore-local-community-list" v-for="(item,index) in recommendList" :key="index"
					@click="handleToDetail(item)">
					<view class="Explore-local-community-list-content">
						<view class="Explore-local-community-list-content-top">
							<view class="Explore-local-community-list-content-top-left">
								<view class="Explore-local-community-list-content-top-left-img">
									<u-avatar :src="item.avatar" shape="circle" size="25"></u-avatar>
								</view>
								<view class="Explore-local-community-list-content-top-left-name">
									{{item.nickName}}
								</view>
							</view>
							<view class="Explore-local-community-list-content-top-right">
								<view class="Explore-local-community-list-content-top-right-left">
									{{item.viewCount?item.viewCount+'浏览':''}}
								</view>
								<view class="Explore-local-community-list-content-top-right-right">
									{{item.commentCount?item.commentCount+'评论':''}}
								</view>
							</view>
						</view>
						<view class="Explore-local-community-list-content-middle">
							<view class="Explore-local-community-list-content-middle-left">
								<view class="Explore-local-community-list-content-middle-left-h1">
									{{item.title}}
								</view>
								<view class="Explore-local-community-list-content-middle-left-h2">
									{{item.content}}
								</view>
							</view>
							<view class="Explore-local-community-list-content-middle-right">
								<image :src="getFirstImageUrl(item.files)" mode="aspectFill" :lazy-load="true"></image>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="waterfallLoadStatus" />
				<view class="" style="height: 20rpx;"></view>
			</view>
		</view>

		<view class="local-circle-publish-button" @click="navigateToRelease">
			<u-icon name="edit-pen" color="#fff" size="20"></u-icon>
			<view class="header-top-right-title">
				发圈儿
			</view>
		</view>

		<u-popup :show="showCertification" mode="center" @close="close" @open="open" :round="15">
			<view class="CertificationStyle">
				<view class="title">
					您还未认证
				</view>
				<view class="content">
					需要认证成为本地人后才可以发布“晒本地”哦！
				</view>
				<view class="button-wrapper">
					<view class="button" @click="handleToAuthenticationBottomBtn()">
						去认证
					</view>
				</view>
			</view>
		</u-popup>

		<richPostDetail :show="showRichPostDetail" @close="showRichPostDetail = false" :postData="currentDetail" />
	</view>
</template>

<script>
	import {
		getPosts,
		topicsList,
		getCommentCount,
		getPersonByUserId
	} from '@/request/api.js';
	import richPostDetail from '@/components/richPostDetail/richPostDetail.vue';
	export default {
		components: {
			richPostDetail
		},
		data() {
			return {
				topTitleList: [],
				StreetDiscussionList: [],
				waterfallPage: 1,
				waterfallPageSize: 8,
				isWaterfallLoading: false,
				waterfallLoadStatus: 'loadmore',
				isNewDesc: 0,
				contentTouchStartX: 0,
				contentTouchEndX: 0,
				contentTouchStartY: 0, // 新增
				contentTouchEndY: 0, // 新增
				contentTouchStartTime: 0,
				contentTouchEndTime: 0,
				isContentSwiping: false,
				tabSwitchCooldown: false,
				savedScrollTop: 0,
				hotList: [],
				recommendList: [],
				latestList: [],
				isSwitchingTab: false, // 标记是否正在切换tab
				streetDiscussionFixed: false, // 街头热议是否吸顶
				tabScrollPositions: {
					0: 0, // 最新tab的滚动位置
					1: 0, // 最热tab的滚动位置
					2: 0 // 推荐tab的滚动位置
				},
				tabHasScrolled: {
					0: false, // 最新tab是否滚动过
					1: false, // 最热tab是否滚动过
					2: false // 推荐tab是否滚动过
				},
				streetDiscussionOffsetTop: 200, // 根据实际布局调整这个值
				// 为每个tab维护独立的分页状态
				tabPagination: {
					0: {
						page: 1,
						pageSize: 8,
						hasMore: true
					}, // 最新
					1: {
						page: 1,
						pageSize: 8,
						hasMore: true
					}, // 最热
					2: {
						page: 1,
						pageSize: 8,
						hasMore: true
					} // 推荐
				},
				// 为每个tab维护独立的加载状态
				tabLoading: {
					0: false, // 最新
					1: false, // 最热
					2: false // 推荐
				},
				// 为每个tab维护独立的加载状态
				tabLoadStatus: {
					0: 'loadmore', // 最新
					1: 'loadmore', // 最热
					2: 'loadmore' // 推荐
				},
				isHeaderFixed: false,
				isStreetDiscussionFixed: false,
				statusBarHeight: 0,
				showRichPostDetail: false,
				currentDetail: {},
				searchVal: '',
				showCertification: false,
				commonStatus: 0, //认证状态  0未提交，1已通过，2已驳回。3已提交待审核
			};
		},
		onLoad() {
			console.log('执行了');
			this.loadPosts(true);
			this.getTopList();
		},
		onReachBottom() {
			this.loadPosts(false);
		},
		onPullDownRefresh() {
			//如果打开的是详情弹框，下拉刷新不掉接口
			if (this.showRichPostDetail) {

			} else {
				this.loadPosts(true);
			}
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);

		},
		onBackPress(options) {
			// 优先关闭详情弹框
			if (options.from === 'backbutton' && this.showRichPostDetail) {
				// 需要触发组件的关闭
				this.showRichPostDetail = false
				return true;
			}
			return false;
		},
		computed: {
			// 获取第一张图片的URL
			getFirstImageUrl() {
				return (files) => {
					if (files && files.length > 0) {
						return files[0].fileUrl || '';
					}
					return '';
				};
			},
			cityName() {
				return this.$store.state.cityInfo.name
			},
		},

		onPageScroll(e) {
			this.savedScrollTop = e.scrollTop;
			// 准确判断街头热议是否吸顶
			this.streetDiscussionFixed = e.scrollTop >= this.streetDiscussionOffsetTop;
			console.log(this.savedScrollTop);
			if (!this.isSwitchingTab) {
				// 只保存当前tab的滚动位置
				this.tabScrollPositions[this.isNewDesc] = e.scrollTop;
				// 标记当前tab已经滚动过
				if (e.scrollTop > 0) {
					this.tabHasScrolled[this.isNewDesc] = true;
				}
			}
		},
		methods: {
			// 获取身份认证状态
			getPersonStatus() {
				return new Promise((resolve) => {
					let params = {
						userId: this.$store.state.userInfo.userId,
					}
					getPersonByUserId(params).then(res => {
						// 只要返回500就打开弹框
						switch (res.data.code) {
							case 200:
								// 本地人身份认证状态
								if (res.data.ClientUserPerson && res.data.ClientUserPerson.starts == 1) {
									this.commonStatus = 1
								} else if (res.data.ClientUserPerson && (res.data
										.ClientUserPerson.starts == 0)) {
									this.commonStatus = 0
								} else if (res.data.ClientUserPerson && (res.data.ClientUserPerson
										.starts == 2 || res
										.data.ClientUserPerson.starts == 3)) {
									this.commonStatus = 3
								}
								// 是否已经发过本地帖子
								if (res.data.clientPostList.length > 0) {
									this.isCurrentClinetPost = true
								}
								break;
							default:
								// 其他情况默认为未认证
								this.commonStatus = 0
								break;
						}
						resolve();
					}).catch(() => {
						resolve(); // 即使出错也要resolve，保证流程继续
					})
				});
			},
			handleToAuthenticationBottomBtn() {
				this.showCertification = false
				uni.navigateTo({
					url: '/pages_sub/authentication/Personal/entrance'
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.showCertification = false
				// console.log('close');
			},
			// 获取状态栏高度
			getStatusbarHeight() {
				// uni-app 提供的方法获取状态栏高度
				const systemInfo = uni.getSystemInfoSync();
				return 48;
			},

			// 头部吸顶状态变化
			onHeaderFixed(isFixed) {
				this.isHeaderFixed = isFixed;
			},

			// 街头热议吸顶状态变化
			onStreetDiscussionFixed(isFixed) {
				this.isStreetDiscussionFixed = isFixed;
			},
			navigateToCitySelect() {
				uni.navigateTo({
					url: '/pages_sub/common/city/city-select'
				});
			},
			// 页面滚动处理
			onPageScroll(e) {
				this.savedScrollTop = e.scrollTop;
				// 准确判断街头热议是否吸顶
				this.streetDiscussionFixed = e.scrollTop >= this.streetDiscussionOffsetTop;

				if (!this.isSwitchingTab) {
					// 只保存当前tab的滚动位置
					this.tabScrollPositions[this.isNewDesc] = e.scrollTop;
					// 标记当前tab已经滚动过
					if (e.scrollTop > 0) {
						this.tabHasScrolled[this.isNewDesc] = true;
					}
				}
			},
			// 街头热议吸顶状态变化时调用
			onStreetDiscussionFixed(isFixed) {

			},
			// 点击列表内容进入详情页
			handleToDetail(item) {
				this.currentDetail = item
				this.showRichPostDetail = true
				let params = {
					postId: item.id
				}
				getCommentCount(params).then(res => {
					console.log(res);
				})
				// uni.navigateTo({
				// 	url: '/pages_sub/index/local-circles-detail/local-circles-detail',
				// 	success: (res) => {
				// 		res.eventChannel.emit('acceptDataFromCirclePage', {
				// 			item: item
				// 		});
				// 	},
				// 	fail: (err) => {
				// 		console.error("跳转失败:", err);
				// 	}
				// });
			},
			async getTopList() {
				const params = {
					pageNum: 1,
					pageSize: 5,
					queryType: 6,
					categoryId: 4,
					location: this.cityName,
					isNewDesc: 5
				}
				try {
					// const res = await topicsList(params);
					const res = await getPosts(params);
					if (res.data && res.data.code === 200) {
						this.StreetDiscussionList = res.data.rows
					}
				} catch (error) {
					console.error('加载话题失败:', error);
				}
			},
			async loadPosts(isRefresh = false) {
				const currentTab = this.isNewDesc; // 当前tab类型
				const pagination = this.tabPagination[currentTab];

				// 检查是否正在加载或没有更多数据
				if (this.tabLoading[currentTab] || (!isRefresh && !pagination.hasMore)) return;

				this.tabLoading[currentTab] = true;
				this.tabLoadStatus[currentTab] = 'loading';

				// 如果是刷新，重置页码
				if (isRefresh) {
					pagination.page = 1;
					// 清空对应tab的数据
					switch (currentTab) {
						case 0: // 最新
							this.latestList = [];
							break;
						case 1: // 最热
							this.hotList = [];
							break;
						case 2: // 推荐
							this.recommendList = [];
							break;
					}
				}
				// 根据注释修正参数映射关系
				// currentTab 0:最新 1:最热 2:推荐
				// isNewDesc 3:最新 1:最热 4:推荐
				const isNewDescValue = currentTab === 0 ? 3 : currentTab === 1 ? 1 : currentTab === 2 ? 4 : null;

				const params = {
					userId: this.$store.state.userInfo.userId,
					queryType: 1,
					categoryId: 4,
					pageNum: pagination.page,
					pageSize: pagination.pageSize,
					isNewDesc: isNewDescValue,
					location: this.cityName,
					content: this.searchVal
				};
				try {
					const res = await getPosts(params);
					if (res.data && res.data.code === 200) {
						const newPosts = res.data.rows || [];
						const hasMore = newPosts.length === pagination.pageSize;

						// 更新分页信息
						pagination.hasMore = hasMore;
						this.tabLoadStatus[currentTab] = hasMore ? 'loadmore' : 'nomore';

						// 根据tab类型更新对应的数据列表
						if (isRefresh) {
							switch (currentTab) {
								case 0: // 最新
									this.latestList = newPosts;
									break;
								case 1: // 最热
									this.hotList = newPosts;
									break;
								case 2: // 推荐
									this.recommendList = newPosts;
									break;
							}
						} else {
							switch (currentTab) {
								case 0: // 最新
									this.latestList = [...this.latestList, ...newPosts];
									break;
								case 1: // 最热
									this.hotList = [...this.hotList, ...newPosts];
									break;
								case 2: // 推荐
									this.recommendList = [...this.recommendList, ...newPosts];
									break;
							}
						}

						// 如果还有更多数据，增加页码
						if (hasMore) {
							pagination.page++;
						}
					} else {
						this.tabLoadStatus[currentTab] = 'loadmore';
					}
				} catch (error) {
					console.error('加载帖子失败:', error);
					this.tabLoadStatus[currentTab] = 'loadmore';
				} finally {
					this.tabLoading[currentTab] = false;
				}
			},
			onBack() {
				uni.navigateBack();
			},
			// 处理本地圈子发布按钮的点击事件
			async navigateToRelease() {
				await this.getPersonStatus(); // 等待认证状态获取完成

				// 如果个人信息认证未完成，去跳转到判断是否打开弹框，如果0打开弹框，否则直接放行
				if (this.commonStatus == 0 || this.commonStatus == 3) {
					this.handleToAuthentication()
					return
				}
				// 如果跳转的是晒本地并且已经发布过晒本地，则放行，否则到认证界面
				if (this.isCurrentClinetPost != 1) {
					uni.navigateTo({
						url: '/pages_sub/authentication/Personal/entrance'
					})
					return
				}
				uni.navigateTo({
					url: '/pages_sub/index/local-circles-publish/local-circles-publish'
				});
			},
			handleToAuthentication() {
				if (this.commonStatus == 0) {
					this.showCertification = true
					return
				}
				this.showCertification = false
				uni.navigateTo({
					url: '/pages_sub/authentication/Personal/entrance'
				})
			},
			handleContentTouchStart(event) {
				this.contentTouchStartX = event.touches[0].clientX;
				this.contentTouchStartY = event.touches[0].clientY; // 记录垂直坐标
				this.contentTouchStartTime = new Date().getTime();
				this.isContentSwiping = false;
			},
			// content区域触摸移动事件
			handleContentTouchMove(event) {
				// 可以在这里添加滑动过程中的效果
			},
			// content区域触摸结束事件
			handleContentTouchEnd(event) {
				this.contentTouchEndX = event.changedTouches[0].clientX;
				this.contentTouchEndY = event.changedTouches[0].clientY; // 记录垂直坐标
				this.contentTouchEndTime = new Date().getTime();
				this.handleContentSwipeGesture();
			},
			// 处理content区域的滑动手势
			handleContentSwipeGesture() {
				const swipeDistanceX = this.contentTouchEndX - this.contentTouchStartX;
				const swipeDistanceY = Math.abs(this.contentTouchEndY - this.contentTouchStartY); // 垂直方向移动距离
				const swipeTime = this.contentTouchEndTime - this.contentTouchStartTime;
				const swipeThreshold = 50;
				const verticalThreshold = 30; // 垂直方向阈值

				// 添加防抖控制
				if (this.tabSwitchCooldown) return;

				// 检查滑动距离是否超过阈值 且 滑动时间不太长（避免误判为滚动）
				// 新增条件：水平滑动距离必须大于垂直滑动距离，确保是水平滑动
				if (Math.abs(swipeDistanceX) > swipeThreshold &&
					swipeTime < 300 &&
					Math.abs(swipeDistanceX) > swipeDistanceY * 1.5) { // 水平滑动距离至少是垂直的1.5倍

					this.tabSwitchCooldown = true;
					this.isContentSwiping = true;

					if (swipeDistanceX > 0) {
						// 右滑 - 切换到上一个tab
						this.switchToPreviousTab();
					} else {
						// 左滑 - 切换到下一个tab
						this.switchToNextTab();
					}

					// 重置滑动状态
					setTimeout(() => {
						this.isContentSwiping = false;
						this.tabSwitchCooldown = false;
					}, 300);
				}
			},
			// 切换到上一个tab
			switchToPreviousTab() {
				let targetTab;
				switch (this.isNewDesc) {
					case 2: // 从推荐切换到最新
						targetTab = 0;
						break;
					case 0: // 从最新切换到最热
						targetTab = 1;
						break;
					case 1: // 从最热切换到推荐
						targetTab = 2;
						break;
				}

				if (targetTab !== undefined) {
					this.handleSwitch(targetTab);
				}
			},
			// 切换到下一个tab
			switchToNextTab() {
				let targetTab;
				switch (this.isNewDesc) {
					case 2: // 从推荐切换到最热
						targetTab = 1;
						break;
					case 1: // 从最热切换到最新
						targetTab = 0;
						break;
					case 0: // 从最新切换到推荐
						targetTab = 2;
						break;
				}

				if (targetTab !== undefined) {
					this.handleSwitch(targetTab);
				}
			},
			// 修改 handleSwitch 方法
			handleSwitch(val) {
				if (this.isNewDesc === val) return;

				this.isSwitchingTab = true;

				// 保存当前tab的滚动位置
				this.tabScrollPositions[this.isNewDesc] = this.savedScrollTop;
				this.tabHasScrolled[this.isNewDesc] = this.savedScrollTop > 0;

				// 切换tab
				this.isNewDesc = val;

				// 恢复目标tab的滚动位置
				this.$nextTick(() => {
					setTimeout(() => {
						let scrollTop = 0;
						// 如果目标tab已经滚动过，使用保存的位置
						if (this.tabHasScrolled[val]) {
							scrollTop = this.tabScrollPositions[val];
						}
						// 如果目标tab未滚动过但街头热议已吸顶，保持吸顶状态
						else if (this.streetDiscussionFixed) {
							scrollTop = this.streetDiscussionOffsetTop;
						}

						uni.pageScrollTo({
							scrollTop: scrollTop,
							duration: 0
						});

						// 延迟重置切换状态，确保滚动完成
						setTimeout(() => {
							this.isSwitchingTab = false;
						}, 100);
					}, 50); // 稍微延迟执行，确保DOM更新完成
				});

				// 如果目标tab没有数据，加载数据
				const pagination = this.tabPagination[val];
				const hasData = (() => {
					switch (val) {
						case 0:
							return this.latestList && this.latestList.length > 0;
						case 1:
							return this.hotList && this.hotList.length > 0;
						case 2:
							return this.recommendList && this.recommendList.length > 0;
						default:
							return false;
					}
				})();

				if (!hasData) {
					this.loadPosts(true);
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.page-container {
		background-color: #fff;
		min-height: 100vh;
		-webkit-overflow-scrolling: touch;
		position: relative;
	}

	.header {
		background: linear-gradient(to bottom, #FFE397, #fff);
		height: 160rpx;
		padding-top: 84rpx;
		padding-bottom: 20rpx;

		// 添加固定定位时的样式
		&.u-sticky-fixed {
			background: #fff !important; // 强制使用纯白色背景
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); // 添加轻微阴影增强层次感
		}

		.header-top {
			margin: 0 27rpx;
			display: flex;
			justify-content: space-between;

			.header-top-left {
				height: 56rpx;
				display: flex;
				align-items: center;

				.header-top-left-titleImage {
					margin-left: 10rpx;
					width: 200rpx;
					height: 56rpx;
				}
			}

			.header-top-right {
				height: 56rpx;
				line-height: 56rpx;
				background-color: #FF5A58;
				width: 140rpx;
				border-radius: 20rpx;
				display: flex;
				box-sizing: border-box;
				padding: 0 10rpx;
				z-index: 10;

				.header-top-right-title {
					color: #fff;
					font-size: 26rpx;
					font-weight: 700;
					text-align: center;
				}
			}
		}

		.topicBox {
			width: 222rpx;
			height: 222rpx;
			position: absolute;
			top: 52rpx;
			right: 80rpx;
			z-index: 1;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.middle-search {
			margin: 20rpx 27rpx 20rpx 27rpx;

			.search-input-prefix {
				display: flex;

				.search-input-prefix-address {
					font-size: 30rpx;
					font-weight: 400;
				}

				.search-input-prefix-icon {
					margin: 7rpx 10rpx;
				}
			}
		}
	}

	// 街头热议
	.Street-discussion {
		padding: 0rpx 27rpx 20rpx;

		.Street-discussion-content {
			.Street-discussion-content-imgBox {
				margin-right: 20rpx;
				margin-top: 20rpx;
			}

			.image-wrapper {
				position: relative;
				border-radius: 20rpx;
				width: 240rpx;
				height: 310rpx;
				overflow: hidden;
			}

			.image-wrapper image {
				width: 100%;
				height: 100%;
			}

			.Street-discussion-content-imgTitle {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				background: rgba(0, 0, 0, 0.6);
				color: #fff;
				line-height: 30rpx;
				font-size: 22rpx;
				font-weight: 700;
				padding: 10rpx;
				box-sizing: border-box;
			}
		}
	}

	.Explore-local-community-header {
		height: 56rpx;
		line-height: 56rpx;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background-color: #fff;

		// 吸顶时的样式
		&.u-sticky-fixed {
			background: #fff !important;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		}

		.Explore-local-community-header-left {
			display: flex;

			.Explore-local-community-header-imageBox {
				width: 56rpx;
				height: 56rpx;

				image {
					width: 56rpx;
					height: 56rpx;
				}
			}

			.Explore-local-community-header-title {
				color: #000;
				font-size: 30rpx;
				font-weight: 700;
				margin-left: 10rpx;
			}
		}

		.Explore-local-community-header-right {
			.switch-container {
				position: relative;
				display: flex;
				width: 240rpx;
				height: 50rpx;
				background-color: #f0f0f0;
				border-radius: 25rpx;
				overflow: hidden;

				.switch-option {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					font-weight: 500;
					color: #666;
					z-index: 2;
					transition: color 0.3s ease;

					&.active {
						color: #fff;
						font-weight: 700;
					}
				}

				.switch-slider {
					position: absolute;
					width: 33.33%;
					height: 100%;
					background-color: #000;
					border-radius: 25rpx;
					transition: transform 0.3s ease;
					z-index: 1;

					&.slide-left {
						transform: translateX(0%);
					}

					&.slide-center {
						transform: translateX(100%);
					}

					&.slide-right {
						transform: translateX(200%);
					}
				}
			}
		}
	}

	.Explore-local-community-wrapper {
		// 添加最小高度以保持容器稳定
		min-height: 100vh;

		// 探索本地圈
		.Explore-local-community {
			padding: 20rpx 27rpx;

			.Explore-local-community-list {
				margin-top: 20rpx;
				box-sizing: border-box;
				box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
				padding: 20rpx;

				.Explore-local-community-list-content-top {
					display: flex;
					justify-content: space-between;
					height: 56rpx;
					line-height: 56rpx;

					.Explore-local-community-list-content-top-left {
						display: flex;

						.Explore-local-community-list-content-top-left-img {
							width: 50rpx;
							height: 50rpx;
						}

						.Explore-local-community-list-content-top-left-name {
							margin-left: 20rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #4D4D56;
						}
					}

					.Explore-local-community-list-content-top-right {
						display: flex;
						font-size: 22rpx;
						font-weight: 400;
						color: #4D4D56;

						.Explore-local-community-list-content-top-right-right {
							margin-left: 20rpx;
						}
					}
				}

				.Explore-local-community-list-content-middle {
					height: 164rpx;
					display: flex;
					justify-content: space-between;

					.Explore-local-community-list-content-middle-left {
						.Explore-local-community-list-content-middle-left-h1 {
							width: 366rpx;
							height: 80rpx;
							font-size: 30rpx;
							font-weight: 500;
							color: #000;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							word-wrap: break-word;
							line-height: 40rpx;
							margin-top: 10rpx;
						}

						.Explore-local-community-list-content-middle-left-h2 {
							width: 366rpx;
							height: 60rpx;
							font-size: 22rpx;
							font-weight: 400;
							color: #787882;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							word-wrap: break-word;
							line-height: 30rpx;
							margin-top: 10rpx;
						}
					}

					.Explore-local-community-list-content-middle-right {
						width: 258rpx;
						height: 166rpx;

						image {
							border-radius: 20rpx;
							width: 258rpx;
							height: 166rpx;
						}
					}
				}
			}
		}
	}

	/*
	  本地圈子悬浮发布按钮样式 
	*/
	.local-circle-publish-button {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		/*
		 * 关键点：设置 bottom 值
		 * 距离底部的距离，可以根据需要调整
		 */
		bottom: 30rpx;
		z-index: 999;
		/* 确保层级正确 */
		width: 200rpx;
		height: 80rpx;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(255, 90, 88, .8);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15); // 添加阴影提升视觉效果

		.local-circle-publish-button-iocn {
			width: 42rpx;
			height: 42rpx;
			margin-right: 10rpx;
			flex-shrink: 0; // 防止图片被压缩

			image {
				width: 100%;
				height: 100%;
				display: block; // 防止图片底部留白
			}
		}

		.publish-title {
			color: #fff;
			font-size: 26rpx;
			font-weight: 700;
			text-align: center;
		}

		.header-top-right-title {
			color: #fff;
			font-size: 30rpx;
			font-weight: 700;
			text-align: center;
			margin-left: 10rpx;
		}

		/* 添加一个点击效果 */
		&:active {
			transform: translateX(-50%) scale(0.95);
			opacity: 0.9;
		}
	}


	// 去认证弹框
	.CertificationStyle {
		width: calc(100vw - 160rpx);
		padding: 40rpx 0;
		text-align: center;

		.title {
			font-size: 40rpx;
			line-height: 40rpx;
			font-weight: bold;
			text-align: center;
			margin-bottom: 36rpx;
		}

		.content {
			font-weight: 500;
			font-size: 30rpx;
			line-height: 1.5;
			padding: 0 110rpx 36rpx;
			text-align: left;
			text-indent: 1em;
		}

		.button-wrapper {
			display: flex;
			justify-content: center;
			padding: 0 40rpx 40rpx;

			.button {
				width: 180rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background-color: rgba(255, 179, 39, 1);
				border-radius: 30rpx;
				font-size: 30rpx;
				font-weight: bold;
			}
		}
	}
</style>